<template>
  <div>
    <h4>矩阵</h4>
    <div>
      <el-radio-group v-model="radioValue" @change="radioChange">
        <el-radio label="1">数值1</el-radio>
        <el-radio label="2">数值2</el-radio>
        <el-radio label="3">数值3</el-radio>
        <el-radio label="1/2">数值1/2</el-radio>
        <el-radio label="1/3">数值1/3</el-radio>
        <el-radio label="1/4">数值1/4</el-radio>
        <el-radio label="1/5">数值1/5</el-radio>
      </el-radio-group>
    </div>

    <div style="width: 800px; height: 500px;">
      <matrix-table :data-source="list" :columns="tableColumns" @cell-select="handleCellSelect"></matrix-table>
    </div>
  </div>
</template>

<script>
import matrixTable from '@/components/matrix-table';

// const tableColumns = [
//   { dataIndex: 'rowName', title: '', width: 150, fixed: 'left' },
//   { dataIndex: 'col1', title: '管龄' },
//   { dataIndex: 'col2', title: '管材' },
//   { dataIndex: 'col3', title: '管长' },
//   { dataIndex: 'col4', title: '管径' },
//   { dataIndex: 'col5', title: '管壁' },
// ];

export default {
  name: 'matrix-example',
  components: { matrixTable },
  data() {
    return {
      list: [],
      tableColumns: [],
      radioValue: 1,
      selectCell: null,
    };
  },
  mounted() {
    const dataSource = [
      { id: 1, name: '管龄', data: ['1', '1', '1', '1', '1'] },
      { id: 2, name: '管材', data: ['1', '1', '1', '1', '1'] },
      { id: 3, name: '管长', data: ['1', '1', '1', '1', '1'] },
      { id: 4, name: '管径', data: ['1', '1', '1', '1', '1'] },
      { id: 5, name: '管壁', data: ['1', '1', '1', '1', '1'] },
    ];

    this.tableColumns = [];
    this.list = [];

    let keys = [];
    if (dataSource.length > 0 && dataSource[0].data.length > 0) {
      this.tableColumns.push({ dataIndex: 'name', title: '', width: 150, fixed: 'left' });
      keys = dataSource[0].data.map((o, i) => `col${i}`);
    }

    let titles = dataSource.map(o => o.name);
    keys.forEach((k, i) => {
      this.tableColumns.push({ dataIndex: k, title: titles[i] });
    });

    dataSource.forEach((item, idx) => {
      const obj = { id: item.id, name: item.name };
      item.data.forEach((o, i) => {
        obj[keys[i]] = o;
      });
      const fields = keys.filter((o, i) => i <= idx);
      obj.readOnlyField = ['name', ...fields];
      obj.hideFields = fields;
      obj.redMark = '';
      this.list.push(obj);
    });

    console.log('list => ', JSON.parse(JSON.stringify(this.list)));

    // this.list = [
    //   { id: 1, rowName: '管龄', col1: '', col2: '', col3: '', col4: '', col5: '' },
    //   { id: 2, rowName: '管材', col1: '', col2: '', col3: '', col4: '', col5: '' },
    //   { id: 3, rowName: '管长', col1: '', col2: '', col3: '', col4: '', col5: '' },
    //   { id: 4, rowName: '管径', col1: '', col2: '', col3: '', col4: '', col5: '' },
    //   { id: 5, rowName: '管壁', col1: '', col2: '', col3: '', col4: '', col5: '' },
    // ];
  },
  methods: {
    radioChange(val) {
      this.radioValue = val;
      if (this.selectCell && this.selectCell.row) {
        this.$set(this.selectCell.row, this.selectCell.fieldName, val);
        const rowIndex = this.selectCell.rowIndex;
        const columnIndex = this.selectCell.columnIndex;
        this.$set(this.list[columnIndex - 1], `col${rowIndex}`, this.getReciprocal(val));

        if (this.isConsistent(val)) {
          let redMark = this.selectCell.row.redMark;
          if (!redMark || redMark.length === 0) {
            this.$set(this.selectCell.row, 'redMark', this.selectCell.fieldName);
          } else {
            if (!redMark.indexOf(this.selectCell.fieldName) > -1) {
              redMark += `,${this.selectCell.fieldName}`;
              this.$set(this.selectCell.row, 'redMark', redMark);
            }
          }
        } else {
          this.$set(this.selectCell.row, 'redMark', '');
          this.list.forEach((item) => {
            if (item.redMark.length > 0) {
              this.$set(item, 'redMark', '');
            }
          });
        }
        console.log('radioValue => ', this.radioValue, JSON.parse(JSON.stringify(this.selectCell)), JSON.parse(JSON.stringify(this.list)));
      }
    },

    isConsistent(val) {
      return val === '1/4';
    },

    /**
     * 获取倒数
     */
    getReciprocal(val) {
      if (val.indexOf('/') > -1) {
        const arr = val.split('/');
        return `${arr[1]}/${arr[0]}`;
      }
      return `1/${val}`;
    },

    /**
     * 单元格选中回调方法
     * @param opt
     */
    handleCellSelect(opt) {
      this.radioValue = '';
      this.selectCell = opt;
    },
  },
};
</script>

<style lang="scss" scoped></style>

